<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="MasterPage.xhtml">
            <style>
                table tr td{
                    text-align: center;
                }
            </style>
            <ui:define name="deSlide">
            </ui:define>
            <ui:define name="contents">
                <h:form>
                    <script type="text/javascript">
                        function checkItemCart(sizeCart){
                            if(sizeCart > 0){
                               return confirm("Are you sure Orders this?");
                            }else{
                                alert('Cart empty!');
                                return false;
                            }
                        }
                    </script>
                    #{pAIManagerBean.loadInforFromData()}
                    <c:if test="#{messageManager.displayMessage}">
                        <div class="DetailsAlbumMessage">
                            <c:if test="#{messageManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" 
                                    style="color: white;">#{messageManager.message}</h5>
                            </c:if>
                            <c:if test="#{!messageManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" 
                                    style="color: red;">#{messageManager.message}</h5>
                            </c:if>
                            #{messageManager.resetMessage()}
                        </div>
                    </c:if>
                    <div style=" padding: 0; margin: 0; margin-left: -40px; margin-top: -11px; width: 775px">
                        <h2 class="ClientPreviewBillsH2">PAYMENT</h2>
                        <div class="ClientPreviewBillsAddress">
                            <div class="ClientPreviewBillslblUserInfor">Customer information</div>
                            <div class="ClientPreviewBillsBoth">
                                <span class="ClientPreviewBillsLable">First and last name:</span>
                                <span class="ClientPreviewBillOutput">#{pAIManagerBean.name}</span>
                            </div>
                            <div class="ClientPreviewBillsBoth">
                                <span class="ClientPreviewBillsLable">Phone:</span>
                                <span class="ClientPreviewBillOutput">#{pAIManagerBean.phone}</span>
                            </div>
                            <div class="ClientPreviewBillsBoth">
                                <span class="ClientPreviewBillsLable">Address:</span>
                                <span class="ClientPreviewBillOutput">#{pAIManagerBean.address}</span>
                            </div>
                        </div>
                        <div class="ClientPreviewBillsAddress">
                            <div class="ClientPreviewBillslblUserInfor">Billing information</div>
                            <style type="text/css">
                                table tr td{
                                    margin-bottom: 10px;
                                    height: 20px;
                                }
                            </style>
                            <table style="width: 100%; border-top: 1px solid #d1d0d1;"
                                   cellpadding="0" cellspacing="1px">
                                <tr style="color: #000; 
                                    font-weight: bold; height: 26px; opacity: 0.8">
                                    <th></th>
                                    <th>Image</th>
                                    <th>Products</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Money</th>
                                </tr>
                                <ui:repeat value="#{cartManager.listDataStore}" var="listCart">
                                    <tr>
                                        <td align="center" style="margin-bottom: 2px; width: 25px" class="numbercountS">#{masterPageManagerBean.count}</td>
                                        <td align="center" style="width: 90px"><img src="#{listCart.albumImage}" width="40px" height="50px"/></td>
                                        <td align="left" style="font-weight: 400; color: #000; font-family: arial; font-size: 13px">#{listCart.albumName}</td>
                                        <td style="text-align: center;">$#{listCart.albumPrice}</td>
                                        <td style="text-align: center;">#{listCart.quantity}</td>
                                        <td>$#{listCart.quantity*listCart.albumPrice}</td>
                                    </tr>
                                    <tr>
                                    </tr>
                                </ui:repeat>
                                <tr>
                                    <td colspan="5" class="DefaultCartTotalMoney">Total Money:</td>
                                    <td colspan="1" class="DefaultCartTotalMoneys">$#{cartManager.totalMoney()}</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <h:commandLink onclick="return checkItemCart(#{cartManager.cartSize()})" 
                                           class="s-btnsa" 
                                           value="Ordering" 
                                           action="#{cartManager.ordering(pAIManagerBean.userId, pAIManagerBean.name, pAIManagerBean.address)}"></h:commandLink>
                            <a href="PersonalAuthenticationInformation.xhtml"
                               class="s-btnsa">Back</a>
                        </div>
                    </div>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

